<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>咨询师工作台 - 迈浪心理</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <div class="layout">
            <!-- 侧边栏 -->
            <aside class="sidebar">
                <div class="logo">
                    <svg width="160" height="40" viewBox="0 0 160 40">
                        <path d="M20 5 C15 15, 10 25, 5 35 S25 35, 30 25 S35 15, 40 5" fill="none" stroke="#4a90e2"
                            stroke-width="2" />
                        <text x="45" y="28" font-family="Microsoft YaHei" font-size="24" fill="#fff">迈浪心理</text>
                    </svg>
                </div>
                <nav class="nav-menu">
                    <a href="index.html" class="nav-item active">
                        <span class="nav-icon">📊</span>
                        <span>工作台</span>
                    </a>
                    <a href="schedule.html" class="nav-item">
                        <span class="nav-icon">📅</span>
                        <span>排班管理</span>
                    </a>
                    <a href="records.html" class="nav-item">
                        <span class="nav-icon">📝</span>
                        <span>咨询记录</span>
                    </a>
                    <div class="nav-divider"></div>
                    <a href="profile.html" class="nav-item">
                        <span class="nav-icon">⚙️</span>
                        <span>个人设置</span>
                    </a>
                </nav>
            </aside>

            <!-- 主内容区 -->
            <main class="main-content">
                <!-- 顶部栏 -->
                <header class="top-bar">
                    <div class="welcome">
                        <h2>欢迎回来，{{ therapist.name }}</h2>
                        <p>{{ new Date().toLocaleDateString() }}</p>
                    </div>
                    <div class="user-menu">
                        <span class="notification">🔔</span>
                        <div class="user-info">
                            <img :src="therapist.avatar" :alt="therapist.name" class="avatar">
                            <span class="name">{{ therapist.name }}</span>
                        </div>
                        <button class="logout-btn" @click="logout">退出登录</button>
                    </div>
                </header>

                <!-- 数据概览 -->
                <section class="dashboard">
                    <div class="stats-grid">
                        <div class="stat-card">
                            <h3>今日预约</h3>
                            <div class="stat-value">{{ stats.todayAppointments }}</div>
                            <p class="stat-desc">待进行咨询</p>
                        </div>
                        <div class="stat-card">
                            <h3>本周咨询</h3>
                            <div class="stat-value">{{ stats.weeklyConsultations }}</div>
                            <p class="stat-desc">已完成咨询</p>
                        </div>
                        <div class="stat-card">
                            <h3>来访者数</h3>
                            <div class="stat-value">{{ stats.totalClients }}</div>
                            <p class="stat-desc">累计来访者</p>
                        </div>
                        <div class="stat-card">
                            <h3>满意度</h3>
                            <div class="stat-value">{{ stats.satisfaction }}%</div>
                            <p class="stat-desc">访者评分</p>
                        </div>
                    </div>

                    <!-- 今日日程 -->
                    <div class="schedule-section">
                        <h3>今日日程</h3>
                        <div class="schedule-list">
                            <div v-for="appointment in todaySchedule" :key="appointment.id" class="schedule-item">
                                <div class="time">{{ appointment.time }}</div>
                                <div class="content">
                                    <h4>{{ appointment.clientName }}</h4>
                                    <p>{{ appointment.type }}</p>
                                </div>
                                <div class="status" :class="appointment.statusClass">{{ appointment.statusText }}</div>

                                <button v-if="appointment.status === 'pending'" class="cancel-btn"
                                    @click="showCancelDialog(appointment)">
                                    取消预约
                                </button>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 加载状态 -->
                <div v-if="loading.profile || loading.stats || loading.schedule" class="loading-overlay">
                    <div class="loading-spinner"></div>
                </div>

                <!-- 错误提示 -->
                <div v-if="error" class="error-message">
                    {{ error }}
                </div>

                <!-- 取消预约模态框 -->
                <div v-if="showCancelModal" class="modal">
                    <div class="modal-content">
                        <h3>取消预约</h3>
                        <div class="appointment-info">
                            <p><strong>预约时间：</strong>{{ selectedAppointment.date }} {{ selectedAppointment.time }}</p>
                            <p><strong>来访者：</strong>{{ selectedAppointment.clientName }}</p>
                            <p class="confirm-text">确定要取消这个预约吗？</p>
                        </div>
                        <div class="modal-footer">
                            <button class="cancel-btn" @click="closeCancelModal">关闭</button>
                            <button class="confirm-btn" @click="cancelAppointment">确认取消</button>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
    <script src="js/main.js"></script>
</body>

</html>